<template>
  <el-form-item label="外边距">
    <el-radio-group v-model="editorForm.margin.isDefault" @change="handleDefault">
      <el-radio :label="true">默认</el-radio>
      <el-radio :label="false">自定义</el-radio>
    </el-radio-group>
    <el-checkbox v-if="!editorForm.margin.isDefault" v-model="editorForm.margin.showMobile" label="移动端自定义" size="small" />
    <div v-if="!editorForm.margin.isDefault" class="custom-next">
      <div class="padding-setting">
        <div v-if="editorForm.margin.hasOwnProperty('top')" class="padding-item p0">
          <span>上：</span>
          <el-input v-model="editorForm.margin.topPxValue" type="number" @input="getRealValue('marginTop')" />
        </div>
        <div v-if="editorForm.margin.hasOwnProperty('right')" class="padding-item p0">
          <span>右：</span>
          <el-input v-model="editorForm.margin.rightPxValue" type="number" @input="getRealValue('marginRight')" />
        </div>
        <div v-if="editorForm.margin.hasOwnProperty('bottom')" class="padding-item p0">
          <span>下：</span>
          <el-input v-model="editorForm.margin.bottomPxValue" type="number" @input="getRealValue('marginBottom')" />
        </div>
        <div v-if="editorForm.margin.hasOwnProperty('left')" class="padding-item p0">
          <span>左：</span>
          <el-input v-model="editorForm.margin.leftPxValue" type="number" @input="getRealValue('marginLeft')" />
        </div>
      </div>
    </div>
  </el-form-item>
  <el-form-item label="外边距" v-if="editorForm.margin.showMobile">
    <div class="mobile-tip">移动端（默认为pc端间距的二分之一）</div>
    <div class="custom-next">
      <div class="padding-setting">
        <div v-if="editorForm.margin.hasOwnProperty('top')" class="padding-item p0">
          <span>上：</span>
          <el-input v-model="editorForm.margin.topPxValueMobile" type="number" />
        </div>
        <div v-if="editorForm.margin.hasOwnProperty('right')" class="padding-item">
          <span>右：</span>
          <el-input v-model="editorForm.margin.rightPxValueMobile" type="number" />
        </div>
        <div v-if="editorForm.margin.hasOwnProperty('bottom')" class="padding-item p0">
          <span>下：</span>
          <el-input v-model="editorForm.margin.bottomPxValueMobile" type="number" />
        </div>
        <div v-if="editorForm.margin.hasOwnProperty('left')" class="padding-item">
          <span>左：</span>
          <el-input v-model="editorForm.margin.leftPxValueMobile" type="number" />
        </div>
      </div>
    </div>
  </el-form-item>
</template>

<script setup>
import { inject, ref, onMounted } from 'vue'
import { pxToRem } from '@/utils/tools'

const { editorForm, domList, changeDefault, backUpdate } = inject('commonForm')
// 初始化属性和元素对应关系
const bindDom = ref(new Set())
const initDomMapping = () => {
  const bindKeys = [`${editorForm.value._key}.margin.top`, `${editorForm.value._key}.margin.right`, `${editorForm.value._key}.margin.bottom`, `${editorForm.value._key}.margin.left`]
  domList.value.forEach(element => {
    const bindValue = element.getAttribute('_bind')
    bindKeys.forEach(key => {
      if (bindValue.includes(key)) {
        bindDom.value.add(element)
      }
    })
  })
}

const handleDefault = (val) => {
  if (val) {
    changeDefault('margin')
  }
  bindDom.value.forEach(element => {
    Object.hasOwn(editorForm.value.margin, 'top') ? element.style.marginTop = editorForm.value.margin.top : ''
    Object.hasOwn(editorForm.value.margin, 'right') ? element.style.marginRight = editorForm.value.margin.right : ''
    Object.hasOwn(editorForm.value.margin, 'bottom') ? element.style.marginBottom = editorForm.value.margin.bottom : ''
    Object.hasOwn(editorForm.value.margin, 'left') ? element.style.marginLeft = editorForm.value.margin.left : ''
  })
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

const getRealValue = (field) => {
  if (field === 'marginTop') {
    editorForm.value.margin.top = pxToRem(editorForm.value.margin.topPxValue)
    bindDom.value.forEach(element => {
      element.style.marginTop = editorForm.value.margin.top
    })
  } else if (field === 'marginBottom') {
    editorForm.value.margin.bottom = pxToRem(editorForm.value.margin.bottomPxValue)
    bindDom.value.forEach(element => {
      element.style.marginBottom = editorForm.value.margin.bottom
    })
  } else if (field === 'marginLeft') {
    editorForm.value.margin.left = pxToRem(editorForm.value.margin.leftPxValue)
    bindDom.value.forEach(element => {
      element.style.marginLeft = editorForm.value.margin.left
    })
  } else if (field === 'marginRight') {
    editorForm.value.margin.right = pxToRem(editorForm.value.margin.rightPxValue)
    bindDom.value.forEach(element => {
      element.style.marginRight = editorForm.value.margin.right
    })
  }
  if (bindDom.value.size === 0) {
    backUpdate()
  }
}

onMounted(() => {
  initDomMapping()
})
</script>

<style lang="scss" scoped>
.mobile-tip {
  height: 32px;
  line-height: 32px;
  font-size: 12px;
  color: #606266;
}
</style>